<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/search.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 23px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id='pageDemo'>
	<div title='API'><br>
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#pagerOpApi')">1.IGrid通用分页pagerOp属性配置表</a></h2>
		<div style="display:none" id="pagerOpApi">
	 		<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.page.openDemo('tab2');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="pageInf"></samp>
						<span class="ccay-form-input">{Object} 设置igrid的分页信息的配置，如下：
						<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
							 	<ul>
	                            	<li class="ccay-form-row">
	                            		<samp><h3>属性配置</h3></samp>
	                            		<span class="ccay-form-input"><h3>描述</h3></span>
	                            	</li>
	                            	<li class="ccay-form-row">
	                            		<samp class="i18n" i18nKey="pageSize"></samp>
	                            		<span class="ccay-form-input">{Number} 每页显示的数据条数</span>
	                            	</li>
	                            	<li class="ccay-form-row">
	                            		<samp class="i18n" i18nKey="curPage"></samp>
	                            		<span class="ccay-form-input">{Number} 初始化时显示第几页的数据</span>
	                            	</li>
	                            	<li class="ccay-form-row">
	                            		<samp class="i18n" i18nKey="totalRows"></samp>
	                            		<span class="ccay-form-input">{Number} 数据的总条数</span>
	                            	</li>
	                            	<li class="ccay-form-row">
	                            		<samp class="i18n" i18nKey="totalPage"></samp>
	                            		<span class="ccay-form-input">{Number} 数据的总页数</span>
	                            	</li>
	                            </ul>
	                       </div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="pageSizes"></samp>
						<span class="ccay-form-input">{Array} 设置iGrid分页栏里的每页显示的数据条数下拉框的选项（包含默认的选项），如设置为[10, 20]，则可以选择每页显示10或者20条数据</span>
					</li>
					<div class="ccay-form-body">
	                           	<ul></ul>
	                </div>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="mode"></samp>
						<span class="ccay-form-input">{String} pager模式，number模式，simple模式，默认配置在Ccay.UI.Config.pager.mode</span>
					</li>
					<li class="ccay-form-row">
						<samp><h3>Event属性配置</h3></samp>
						<span class="ccay-form-input"><h3>描述</h3></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnPageChanged"></samp>
						<span class="ccay-form-input">{Function} 设置igrid分页改变后的事件</span>
					</li>
				</ul>
			</div>
			</form>
	 	</div><br>
	 	
	 	<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#scrollOpApi')">2.IGrid滚动分页_scrollOp属性配置表</a></h2>
		<div style="display:none" id="scrollOpApi">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.page.openDemo('tab3');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="start"></samp>
						<span class="ccay-form-input">{Number} 每次滚动数据起始数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="end"></samp>
						<span class="ccay-form-input">{Number} 每次滚动数据结束数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="pageSize"></samp>
						<span class="ccay-form-input">{Number} 每次滚动显示的数据条数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="total"></samp>
						<span class="ccay-form-input">{Number} 数据的总条数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="showStart"></samp>
						<span class="ccay-form-input">{Number} 每次滚动显示的数据起始数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="showEnd"></samp>
						<span class="ccay-form-input">{Number} 每次滚动显示的数据结束数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="newData"></samp>
						<span class="ccay-form-input">{Object} 每次加载的数据集合</span>
					</li>
				</ul>
			</div>
			</form>
		</div>
		
	</div>
	
	<div title='通用分页' tabid='tab2'>
		<h4 id="hd11"><span onclick="Ccay.Common.toggle(this,'#demo11')" style="cursor:pointer;">实例1:IGrid通用分页Demo展示了分页属性（pagerOp）</span></h4>
			<div id="demo11">
			<span class="showClew">设置：每页显示条数、每页显示的数据条数下拉框的选项等等</span><br /><br />
			<div id="iStudent11"></div>	
			<h3>html Code</h3>
			<span></span>
			<div class="codeArea">
				<pre id='html1'>&lt;div id="igridDemo1">&lt;/div></pre>
			</div>
			<h3>js Code</h3>
			<span></span>
			<div class="codeArea">
				<pre id='js1'>
	var gridOption1 = {
		showPager: true,
		
		//<span class="showClew"> 设置igrid的分页属性的配置，<span>当showPager: true时有效</span></span>
		pagerOp:{
			//<span class="showClew"> 设置igrid的分页信息的配置</span>
			pageInf: {
				//<span class="showClew"> 设置igrid每页显示8条数据</span>
				pageSize: 8,
				
				//<span class="showClew"> 设置igrid初始化时显示第2页的数据</span>
				curPage: 2
			},
			//<span class="showClew"> 设置iGrid分页栏里的每页显示的数据条数下拉框的选项（包含默认的选项）</span>
			pageSizes: [8, 10, 15, 20, 50, 100, 200, 500]
		}, 
		columns: [
			{field: 'name', width:90, header: "ccay.common.label.name"},
			{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
			{field: 'age', width:70, header: "sAge", type: 'integer'},
			{field: 'birthday', width:110, header: "sBirthday", type: 'date'},
			{field: 'tuition', width: 170, header: "Tuition", type: 'rate', format: {htmlView: true, section: [20, 40, 80]}},
			{field: 'blog', width:200, header: "sBlog"},
			{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime'}
		],
		ajax: {
			url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
		}
	};
			
	$("#igridDemo1").igrid(gridOption1);
				</pre>
			</div>
			<div class="try">
				<a onclick="Ccay.example.openTry('#pageDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
			</div>
			</div>
		<h4 id="hd12"><span onclick="Ccay.Common.toggle(this,'#demo12')" style="cursor:pointer;">实例2:设置pager模式（pager、number或simple）</span></h4>
		<div id="demo12">
			<span class="showClew">(详见：pager)</span><br /><br />
			<div id="iStudent12"></div>	
			<h3>html Code</h3>
			<span></span>
			<div class="codeArea">
				<pre id='html1'>&lt;div id="igridDemo1">&lt;/div></pre>
			</div>
			<h3>js Code</h3>
			<span></span>
			<div class="codeArea">
				<pre id='js2'>
	var gridOption1 = {
		showPager: true,
		
		//<span class="showClew"> 设置igrid的分页属性的配置，<span>当showPager: true时有效</span></span>
		pagerOp:{
			mode:"pager",
			//<span class="showClew"> 设置igrid的分页信息的配置</span>
			pageInf: {
				//<span class="showClew"> 设置igrid每页显示8条数据</span>
				pageSize: 8,
				
				//<span class="showClew"> 设置igrid初始化时显示第2页的数据</span>
				curPage: 2
			},
			//<span class="showClew"> 设置iGrid分页栏里的每页显示的数据条数下拉框的选项（包含默认的选项）</span>
			pageSizes: [8, 10, 15, 20, 50, 100, 200, 500]
		}, 
		columns: [
			{field: 'name', width:90, header: "ccay.common.label.name"},
			{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
			{field: 'age', width:70, header: "sAge", type: 'integer'},
			{field: 'birthday', width:110, header: "sBirthday", type: 'date'},
			{field: 'tuition', width: 170, header: "Tuition", type: 'rate', format: {htmlView: true, section: [20, 40, 80]}},
			{field: 'blog', width:200, header: "sBlog"},
			{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime'}
		],
		ajax: {
			url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
		}
	};
			
	$("#igridDemo1").igrid(gridOption1);
				</pre>
			</div>
			<div class="try">
				<a onclick="Ccay.example.openTry('#pageDemo',$('#js2').html(),$('#html1').html())">亲自试一试</a>
			</div>
			</div>
	</div>
	
	<div title='滚动分页' tabid='tab3'>
		<span class="showClew">说明：IGrid滚动分页Demo展示了分页属性（_scrollOp）设置:每次滚动显示条数</span><br /><br />
		<div id="iStudent2"></div>	
		<h3>html Code</h3>
		<span></span>
		<div class="codeArea">
			<pre id='html2'>&lt;div id="igridDemo2">&lt;/div></pre>
		</div>
		<h3>js Code</h3>
		<span></span>
		<div class="codeArea">
			<pre id='js3'>
var gridOption2 = {
	height: 230,
	showPager: true,
	lazyLoad: true,
	pagerOp:{
		pageInf: {
			pageSize: 8
		}
	},
	columns: [
		{field: 'id', width: 100, header: 'id'},
		{field: 'name', width:100, header: "name"},
		{field: 'description', width:200, header: "description"}
	],
    ajax: {
    	url: 'services/ccay/demo/grid/list/ranged/${start}/${end}/${orderBy}/${total}'
    }
};

$("#igridDemo2").igrid(gridOption2);
			</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#pageDemo',$('#js3').html(),$('#html2').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
   	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>
